$(function(){
    //轮播图
    var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
        },
    });

    // 返回
    $(".searchpage .header .back").click(function(){
        $(".container").show();
        $(".searchpage").hide();
    })
    $(".container .header .search").click(function(){
        $(".searchpage").show();
        $(".container").hide();
    })

    var startArr = getkeyword();
    render(startArr);

    //添加搜索数据
    $(".searchpage .header .search").click(function(){
        var inputValue=$(".searchtxt").val();
        $(".searchtxt").val("");
        if(inputValue.trim().length==0) return;  //若清除前后空格后内容为空,就不执行后面代码
        //获取历史搜索数据
        var arr = getkeyword();
        //将输入框的内容插入到历史记录中
        arr.unshift(inputValue);
        //保存到浏览器中
        sessionStorage.setItem("keysword",JSON.stringify(arr));
        //渲染数据
        render(arr);
    })

    //清除搜索历史数据
    $(".searchhistory").on("click",".clear",function(){
        sessionStorage.removeItem("keysword");
        render([]);
    })


    //模拟数据
    // sessionStorage.setItem("keysword","[1,2,3,4]");
    // var varStr = sessionStorage.getItem("keysword");
    // var varArr =JSON.parse(varStr);
    // console.log(varArr);
    // var html =template("searchlist",{list:varArr});
    // $(".searchhistory").html(html);

    //获取历史搜索记录
    function getkeyword(){
        var arrArr=[];
        var arrStr = sessionStorage.getItem("keysword");//字符串
        if(arrStr){
            arrArr = JSON.parse(arrStr);
        }
        return arrArr;
    }

    //渲染数据
    function render(arr){
        arr=getkeyword();
        if(arr.length>0){
            $(".searchhistory").show();
            var html =template("searchlist",{list:arr});
            $(".searchhistory").html(html);
        }else{
            $(".searchhistory").hide();
        }
    }



















//     var arrkey = getkeyword();
//     showkeyword(arrkey);

//     //页面切换
//     $('.container .header .search').click(function(){
//         $(".container").hide();
//         $(".searchpage").show()
//     })
//     $('.searchpage .header .back').click(function(){
//         $(".container").show();
//         $(".searchpage").hide();
//     })


//     //搜索按钮的点击事件
//     $(".searchpage .header .search").click(function(){
//         var inputValue = $(".searchpage .header .searchtxt").val();
//         $(".searchpage .header .searchtxt").val("");
//         if(inputValue.trim().length==0) return;
//         var arr = getkeyword();
//         arr.unshift(inputValue);
//         var arrStr = JSON.stringify(arr);
//         sessionStorage.setItem("keywords",arrStr);
//         //显示搜索记录
//         showkeyword(arr);
//     })

//     //从浏览器获取数据
//     function getkeyword(){
//         var keyArr=[]
//         var keyStr = window.sessionStorage.getItem("keywords");
//         //判断keyStr是否有内容
//         if(keyStr){
//             keyArr = JSON.parse(keyStr);
//         }
//             return keyArr;
//     }

//     //设置几个数据
//     // 渲染数据
//     function showkeyword(arr){
//         if(arr.length>0){
//             $(".searchhistory").show();
//         }else{
//             $(".searchhistory").hide();
//         }
//         var html = template("searchlist", {list:arr});
//             $(".searchhistory").html(html);
//     }

//     //清空搜索记录
//     $(".searchhistory").on("click",".clear",function(){
//         window.sessionStorage.removeItem("keywords");
//         showkeyword([]);
//     })
   
})


